<template>
  <div class="login-container">
      <video class="video" muted src="../../assets/video/bg-video.mp4" loop="loop" autoplay="true"></video>
      <div class="bg2"></div>
      
      <!-- 常规登入 -->
    <el-form
      :model="loginFrom"
      status-icon
      :rules="rules"
      ref="loginFrom"
      label-width="100px"
      class="login-loginFrom">
      <h1 class="title">管理系统</h1>
      <i @click="isErweiLogin=!isErweiLogin" 
      :class="['jiaobiao','iconfont',isErweiLogin?'icon-diannaojiaobiao':'icon-erweimajiaobiao']"></i>


    <div class="common-login" v-if="!isErweiLogin">
        <!-- 用户名 -->
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          v-model="loginFrom.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>

    <!-- 密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginFrom.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>

    <!-- 验证码 -->
      <el-form-item label="验证码" prop="captcha">
        <el-input v-model.number="loginFrom.captcha"></el-input>
        <span @click="updateCaptcha"></span>
      </el-form-item>

    <!-- 提交按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginFrom')" class="el-input__inner">提交</el-button>
        <!-- <el-button @click="resetForm('loginFrom')">重置</el-button> -->
      </el-form-item>
    </div>
    
    <!-- 切换二维码登录 -->
    <div class="erwei" v-else>
        二维码
    </div>
    </el-form>
  </div>
</template>
<script>
    import * as api from "../../api"

    var validateCaptcha = (rule, value, callback) => {
      if(!value){
          callback("必须输入验证码")
      }else{
          callback()
      }
    };
    var validateUsername = (rule, value, callback) => {
        var reg = /^\w{3,12}$/
     if(reg.test(value)){
         callback()
     }else{
         callback("用户名可以是字母数字下划线,3-12位")
     }
    };
    var validatePass = (rule, value, callback) => {
      if(value.length<3){
          callback("密码长度必须大于三位")
      }else{
          callback()
      }
    };
export default {
  data() {
    return {
      isErweiLogin:false,//是否位二维码登录
      loginFrom: {
        username: "",
        password: "",
        captcha: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  created(){
//调用获取验证码的方法
this.updateCaptcha()
  },
  methods: {
    //封装一个方法，获取验证码
    updateCaptcha(){
      api.getCaptchaApi()
      .then(res=>{
        console.log(res.data);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
    .login-container{
        .video{
            position: fixed;
		    left: 0;
		    top: 0;
		    right: 0;
           }
           .bg2{
               background-image: url("../../assets/img/bg2.png");
               background-repeat: no-repeat;
		       position: fixed;
		       width: 20%;
		       height: 40%;
		       background-size: 100% 100%;
		       left: 20%;
		       top: 40%;
		       opacity: 0.5;
           }
           .jiaobiao {
                font-size: 60px;
                color: #fff;
                position: absolute;
                right: -1px;
                top: -1px;
                cursor: pointer;
                opacity: 0.7;
	        }
        .el-form{
            position: fixed;
            left: 65%;
            top: 25%;
            border-radius: 10px;
            width: 400px;
            background-color: rgba(0, 0, 0, .3);
            padding:100px 26px 50px 0 ;
           /deep/ .el-input__inner{
                width: 250px;
            }
            .el-button--primary{
                background: linear-gradient(90deg,#1596fb,#002dff);
            }
           /deep/ .el-form-item__label{
                color: #fff;
            }
        }
        .title{
            margin: 30px 0;
            text-align: center;
            color: #fff;
        }
    }
</style>>

